<template>
  <div>
    <a-modal
      :visible="visible"
      :bodyStyle="{
        padding: '10px 30px',
      }"
      :width="700"
      :footer="null"
      @cancel="cancelClick"
      destroyOnClose
    >
      <template #title>
        <div style="font-size: 18px">开通自动发布（抖音/快手）</div>
      </template>
      <div style="font-size: 16px">
        <p>
          请遵守平台运营方规则,如有违规平台运营方可能会对您账号进行处理,同时我们将停止您的功能使用:
        </p>
        <p>1、不得带有违反平台规则的内容(例如引流、色情政治等)。</p>
        <p>
          2、不得发布同质化(类似视频一个账号发多次,或类似视频发到多个帐号上)。
        </p>
        <p>
          3、不得发布低质量内容,我们会对您发布的内容进行定期监控,如果内容特续低质会进行
          相关处罚。
        </p>
        <p>4、同一绑定账号一天最多可发布10条视频,请合理使用额度度。</p>
        <p>
          5、平台拥有功能的监管权力,如发现有违规或滥用功能的行为,平台有权收回(关闭)
          此功能。
        </p>
      </div>
      <div style="text-align: right; padding-top: 10px">
        <a-space>
          <a-button
            @click="cancelClick"
            type="primary"
            style="
              border-radius: 5px;
              background: #fff;
              border: 1px solid #e0e0e6;
              color: #000;
            "
            >取消</a-button
          >
          <a-button
            type="primary"
            style="background: #2878FF; border: none; border-radius: 5px"
            @click="confirmClick"
            >确认开通</a-button
          >
        </a-space>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";
export default {
  name: "NewClip",
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    imgeUrl: {
      type: String,
      default: "",
    },
  },
  setup(props, { emit }) {
    const state = reactive({
      count: 0,
    });

    const cancelClick = () => {
      emit("onCancel");
    };

    const confirmClick = () => {
      emit("onConfirm");
    };

    return {
      ...toRefs(state),
      cancelClick,
      confirmClick,
    };
  },
};
</script>

<style lang="less" scoped>
.footer {
  width: 100%;
  text-align: right;
  margin-top: 40px;
}
</style>
